<template>
  <div class="home">
      <el-container>
          <el-header style="height: 180px;"
                     v-if="!['activeInterception','riskSourceStationAnalysis','daPing','aiDiscouragement', 'aiTable', 'aiImportData'].includes(currentRoute)
          ">
            <div class="model-name">
<!--              普陀反电诈案件监控系统-->
              普公英3185
            </div>
            <div class="header-left" @mouseenter="expandMenu" @mouseleave="collapseMenu" :class="{ 'expanded': isMenuExpanded }">
              <el-button
                class="menu-toggle-button"
                @click="toggleMenu"
              >
                <span v-if="isMenuExpanded">
                  <i class="el-icon-s-fold"></i>
                  收起菜单
                </span>
                <span v-else>
                  展开菜单
                  <i class="el-icon-s-unfold"></i>
                </span>
              </el-button>
              <div class="menu-items-wrapper">
                <el-button
                  v-for="item in routeList"
                  :class="{'active-btn': currentRoute === item.path}"
                  :key="item.path"
                  type="primary"
                  size="mini"
                  @click="jumpTo('/' + item.path, item.isExternal)"
                >
                  {{ item.name }}
                </el-button>
              </div>

<!--              <el-button v-for="item in routeList" :style="{ display: isMenuExpanded ? 'inline-block' : 'none' }" :class="{'active-btn': currentRoute === item.path}" :key="item.path" type="primary" size="mini" @click="jumpTo('/' + item.path, item.isExternal)">{{ item.name }}</el-button>-->
            </div>
<!--            <div class="header-right">-->
<!--              <div class="header-item" @click="changePW">-->
<!--                修改密码-->
<!--              </div>-->
<!--              <div class="header-item" @click="logout">-->
<!--                注销-->
<!--              </div>-->
<!--            </div>-->
          </el-header>
          <el-main :style="mainStyle">
            <router-view/>
          </el-main>
      </el-container>
  </div>
</template>

<script>
// @ is an alias to /src

import Vue from 'vue'
import api from "@/api/common.api";
const defaultMenuWidth = '90px'
export default {
  name: 'Home',
  computed: {
    currentRoute() {
      return this.$route.name
    },
    mainStyle() {
      return {
        padding: ['aiImportData', 'aiDiscouragement'].includes(this.currentRoute) ? 0 : '20px'
      }
    }
  },
  data () {
      return {
        isMenuExpanded: false,
        menuWidth: defaultMenuWidth, // 默认收缩状态的宽度
        routeList: [
          {
            path: 'index',
            name: '首页'
          },
          {
            path: 'dataManage',
            name: '预警管理'
          },
          {
            path: 'caseManage',
            name: '案情管理'
          },
          // {
          //   path: 'indexManage',
          //   name: '首页管理'
          // },
          {
            path: 'vipManage',
            name: '重点人员管理'
          },
          // {
          //   path: 'publicizeManage',
          //   name: '宣贯管理'
          // },
          {
            path: 'activeInterception',
            name: '主动拦截',
            isExternal: true,
          },
          {
            path: 'riskSourceStationAnalysis',
            name: '风险源站分析',
            isExternal: true,
          },
          {
            path: 'aiPage/aiDiscouragement',
            name: 'AI反诈劝阻民警',
            isExternal: true,
          },
          {
            path: 'daPing',
            name: '大屏',
            isExternal: true,
          },
          {
            path: 'victimManage',
            name: '被害人分析'
          },
          {
            path: 'precisePreventManage',
            name: '精准防范处置'
          },
          {
            path: 'streetPrecaution',
            name: '街道防范宣传劝阻处置'
          },
        ],
        changeFlag: true,
        pwComfirm: false,
        statementShow: false,
        markerList: [],
        dialogTableHead: [
              {
                  prop: 'alarmTime',
                  label: '日期',
                  width: 160
              },
          ],
        dialogfieldsList: [
            {
                type: 'text',
                code: 'oldPass',
                name: '原密码',
                password: true,
                placeholder: '请输入原密码',
            },
            {
                type: 'text',
                code: 'newPass',
                name: '新密码',
                password: true,
                placeholder: '请输入新密码',
            },
            {
                type: 'text',
                code: 'comfirmPW',
                name: '确认密码',
                password: true,
                placeholder: '请确认新密码',
            },
        ],
        isHovering: false,
        menuTimeout: null,
      }
  },
  methods: {
      toggleMenu() {
        this.isMenuExpanded = !this.isMenuExpanded
        // 清除之前的定时器
        if (this.menuTimeout) {
          clearTimeout(this.menuTimeout)
          this.menuTimeout = null
        }
      },
      expandMenu() {
        this.isHovering = true
        if (!this.isMenuExpanded) {
          this.isMenuExpanded = true
        }
        // 清除之前的定时器
        if (this.menuTimeout) {
          clearTimeout(this.menuTimeout)
          this.menuTimeout = null
        }
      },
      collapseMenu() {
        this.isHovering = false
        // 延迟关闭菜单，避免立即关闭导致无法点击
        this.menuTimeout = setTimeout(() => {
          if (!this.isHovering) {
            this.isMenuExpanded = false
          }
        }, 300)
      },
      jumpTo(url, isExternal) {
        if (isExternal) {
          // 新开标签页
          const path = this.$router.resolve({path: url});
          window.open(path.href, '_blank')
        }else{
          // 原地跳转
          this.$router.push({path: url})
        }
      },
      changePW () {
          this.$refs.modifyPW_dialog.open({title: '修改密码', width: '40%'})
      },
      logout () {
          this.$store.commit('logOut')
          this.$router.push({name: 'login'})
      },
      getJyzToMap () {
        api.getJyzToMap().then(res=>{
          res.content.forEach(v=>{
            this.addGasStationPoint(v)
          })
        })

      },
      drawPoint (list) {
        this.markerList.forEach(v=>{
          this.removePoint(v)
        })
        list.forEach(v=>{
          this.addPoint(v)
        })
        this.$refs.Lmap.setView([list[list.length - 1].wd,list[list.length - 1].jd], 16)
      },
      removePoint (point) {
          this.$refs.Lmap.removeLayer(point)
      },
      createDom (div) {
        var Profile = Vue.extend({
          template: div,
          data: function () {
            return {
              firstName: 'Walter',
              lastName: 'White',
              alias: 'Heisenberg'
            }
          },
          methods:{
            aaa(){

            }
          }
        })
        let dom = new Profile().$mount()
        return dom
      },
      addGasStationPoint (e) {
        if(!e){
          return false
        }
        let div = `<div class="capture-pop-wrap">
                          <div class="capture-pop-title">加油站</div>
                          <div class="capture-pop-item"><span>管理单位：</span>${e.GLDW}</div>
                          <div class="capture-pop-item"><span>场所名称：</span>${e.CSMC}</div>
                        </div>`
        // 创建 Profile 实例，并挂载到一个元素上。
        let dom = this.createDom(div)
        let point = {
          latlng: {lat: e.WD, lng: e.JD},
          dom: dom.$el
        }
        let icon = require('/src/assets/img/mapImg/gas_station.png')
        this.$refs.Lmap.addMarker(point, icon)
      },
      addPoint (e) {
        if(!e){
          return false
        }
        this.markerList.forEach(v=>{
          this.removePoint(v)
        })
        let div = `<div class="capture-pop-wrap">
                          <div class="capture-pop-title">抓拍信息</div>
                          <div class="capture-pop-item"><span>抓拍时间：</span>${e.passTime}</div>
                          <div class="capture-pop-item"><span>加油站：</span>${e.sbmc}</div>
                          <div class="capture-pop-item"><span>车牌号：</span>${e.plateNo}</div>
                          <div class="capture-pop-item"><span>抓拍照片：</span><img class="captrue-car-img" src="${e.sceneImg}" alt=""></div>
                        </div>`
        // 创建 Profile 实例，并挂载到一个元素上。
        let dom = this.createDom(div)
        let point = {
            latlng: {lat: e.wd, lng: e.jd},
            dom: dom.$el,
            zIndexOffset: 999
        }
        this.markerList.push(this.$refs.Lmap.addMarker(point))
      }
  },
  mounted () {
    // this.getJyzToMap()
    // {lat: 31.096331315335608, lng: 121.2143898010254}
  }
}
</script>
<style lang="stylus">
    .pw-dialog{
      width: 450px!important;
      height: 42%;
      .common-form-wrap{
        padding-left: 50px;
      }
      .pw-comfirm-text{
        position: absolute;
        bottom: 110px;
        left: 150px;
        font-size: 12px;
        color: red;
      }
    }
    /* 可以设置不同的进入和离开动画 */
    /* 设置持续时间和动画函数 */
    .slide-fade-enter-active {
        transition: all .3s ease;
    }
    .slide-fade-leave-active {
        transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
    }
    .slide-fade-enter, .slide-fade-leave-to{
        transform: translateX(10px);
        opacity: 0;
    }
    .statement-dialog{
        width: 700px;
        background-image: url("../assets/img/dialogImg/tc-bg.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
        padding: 40px 30px;
        position: absolute;
        right: 40px;
        top: 100px;
        pointer-events: auto;
        .title{
            font-size: 55px;
            padding-bottom: 20px;
        }
        .content{
            font-size: 40px;
            text-indent: 90px;
            letter-spacing: 5px;
            line-height: 90px;
        }
    }
    .home{
      height: 100%;
      position: relative;
      color: #fff;
      background-image: url("../assets/img/bg/bg.png");
      background-size: 100% 100%;
    }
    .el-container{
      position: absolute;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      z-index: 1;
      //pointer-events: none!important;
      .el-header {
          //height: 180px !important;
          background-image: url("../assets/img/HuaiNanImg/header.png");
          background-size: 100% 250%;
          background-repeat: no-repeat;
          background-position: -20px top;
          display: flex;
          justify-content: center;
          align-items: center;
          position: relative;
          .header-right{
            pointer-events: auto;
            position: absolute;
            right: 10px;
            top: 10px;
            display: flex;

            .header-item{
              color: #2e89c6;
              cursor: pointer;
              & + .header-item{
                margin-left: 10px;
              }
            }
          }
          .header-left {
            z-index: 3;
            position: absolute;
            left: 20px;
            bottom: 0;
            pointer-events: auto;
            background: rgba(20, 97, 167, 0.7);
            padding: 5px;
            border-radius: 4px;
            display: flex;
            align-items: center;
            transition: all 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55); // 弹性动画
            .menu-toggle-button {
              background: transparent;
              border: none;
              color: white;
              font-size: 16px;
              padding: 5px 10px;
              margin-right: 5px;
              cursor: pointer;
              transition: all 0.3s ease;
              flex-shrink: 0;
              &:hover {
                color: #2196f3;
              }
            }
            .menu-items-wrapper {
              display: flex;
              overflow: hidden;
              transition: all 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55); // 弹性动画

              .el-button {
                background: #1461a7;
                border-radius: 0;
                border: none;
                transition: all 0.3s ease;
                opacity: 0.8;
                white-space: nowrap;
                margin-left: 5px !important;
                transform: scale(1);

                &:hover {
                  opacity: 1;
                  transform: scale(1.05);
                }
              }
            }
            // 收缩状态
            &:not(.expanded) {
              .menu-items-wrapper {
                width: 0;
                opacity: 0;
                transform: translateX(-10px);
              }
            }

            // 展开状态
            &.expanded {
              .menu-items-wrapper {
                width: auto;
                opacity: 1;
                transform: translateX(0);
              }
            }
            &:hover {
              background: rgba(20, 97, 167, 0.9);
            }

            .el-button {
              background: #1461a7;
              border-radius: 0;
              border: none;
              transition: all 0.3s ease;
              opacity: 0.8;
              display: inline-block;
              margin-left: 5px !important;

              &:hover {
                opacity: 1;
              }
            }
            .active-btn{
              background: #022f55;
              color: #2196f3;
            }
          }
          .model-name{
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            z-index: 2;
            font-weight: 600;
            font-size: 80px;
            background: linear-gradient(to bottom, #e6f5f8, #a6e2eb);
            -webkit-background-clip: text;
            color: transparent;
            letter-spacing: 8px;

              ::after{
                content: '1111111';
                display: block;
                font-size: 35px;
                position: absolute;
                left: 0; top: 0;
                text-shadow: 5px 5px 10px red;
              }
              /*-webkit-text-fill-color:transparent;*/
          }
          .header-back{
            position: absolute;
            right: 0;
            top: 0;
            width: 170px;
            height: 77px;
            text-align: center;
            background-image: url("../assets/img/title/-s-back.png");
            background-size: 100% 100%;

          }
          .header-info{
            position: absolute;
            right: 125px;
            top: 0;
            width: 170px;
            height: 77px;
            text-align: center;
            background-image: url("../assets/img/title/-s-back.png");
            background-size: 100% 100%;
          }
      }
      .el-main{
          //padding-top: 0;
          overflow: hidden;
          .page-top-half{
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: space-between;
            position: relative;
          }
          .table-panel {
            width: 100%;
            position: absolute;
            height: calc(30% - 10px);
            bottom: 0;
            & > * {
              margin-right: 10px;
            }
            & > *:last-child {
              margin-right: 0;
            }
          }
          .left-panel, .right-panel{
            width: 28%;
            height: 70%;
            pointer-events: auto!important;
            .panel-half{
              height: 50%;
              &+.panel-half{
                margin-top: 10px;
              }
            }
            .col {
              height: 30%;
            }
          }
          .center-panel{
            height: 70%;
            width: calc(54% - 20px);
            margin: 0 10px;
          }
          .right-panel {
            display: flex;
            flex-direction: column;
            gap: 10px;
            .col {
              height: 50%;
            }

          }
      }
    }
    #map_wrap{
      position: fixed;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      background: #003054;
      z-index: 0;
    }
    .panel-common-title{
      height: 60px;
      line-height: 60px;
      font-size: 20px;
      padding-left: 25px;
      position: relative;
      display: flex;
      justify-content space-between;
      .title-text{
        font-weight: 400;

        background: linear-gradient(0deg, #6098FA 0%, #C7DBFD 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;

      }
      &:before{
        content: '';
        position: absolute;
        left: 10px;
        top: 18px;
        width: 5px;
        height: 25px;
        background: #6CCEE6
      }
    }
    .custom-Table-wrap{
      height: 100%;
      .el-scrollbar__wrap{
        overflow-x: hidden;
        margin-right: -20px;
        margin-bottom: 0px!important;
      }
      .custom-table-head{
        display: flex;
      }
      .custom-table-content{
        height: calc(100% - 25px);
        .custom-table-tr{
          display: flex;
          padding: 5px 0;
          margin-top: 10px;
          cursor: pointer;
        }
      }
      .head-item, .custom-table-td{
        text-align: center;
      }
      .head-item{
        color: #5DDEFD;
      }
      .custom-table-tr:nth-child(1){
        background-image: linear-gradient(90deg, #E23AF5, #E23AF5, transparent, transparent);
      }
      .custom-table-tr:nth-child(2){
        background-image: linear-gradient(90deg, #8550F4, #8550F4, transparent, transparent);
      }
      .custom-table-tr:nth-child(3){
        background-image: linear-gradient(90deg, #1D3FD6, #1D3FD6, transparent, transparent);
      }

    }
    .header-left{
        .el-button{
            padding: 15px 20px;
            span{
                font-size: 50px;
            }
            &+.el-button{
                margin-left: 20px;
            }
        }
    }

    @media screen and (max-width: 1920px) {
        .el-header {
            height: 80px !important;
        }
        .model-name {
            font-size: 30px!important;
        }
        .header-left{
            .el-button{
                padding: 6px 10px!important;
                span{
                    font-size: 12px;
                }
                &+.el-button{
                    margin-left: 10px;
                }
            }

        }
    }
</style>
